<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="url" label="url"></el-table-column>
      <el-table-column prop="method" label="method"></el-table-column>
      <el-table-column prop="params" label="params">
        <template #default="scope">
          <pre>{{ JSON.stringify(scope.row.params, null, 2) }}</pre>
        </template>
      </el-table-column>
      <el-table-column prop="data" label="data">
        <template #default="scope">
          <pre>{{ JSON.stringify(scope.row.data, null, 2) }}</pre>
        </template>
      </el-table-column>
      <el-table-column prop="headers" label="headers">
        <template #default="scope">
          <pre>{{ JSON.stringify(scope.row.headers, null, 2) }}</pre>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="submit(scope.row)">发送</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="m-3">
      <el-form ref="form" label-width="5rem">
        <el-form-item label="文件1">
          <input type="file" ref="file1">
        </el-form-item>
        <el-form-item label="文件2">
          <input type="file" ref="file2">
        </el-form-item>
        <el-button type="primary" @click="postFormData">FormData 提交文件</el-button>
      </el-form>
    </div>

    <div>
      <el-button type="primary" @click="testSleep">测试 axios阻塞</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {fmtDateY_M_D_H_M_S} from "@/api/util";

const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 设置你的基础URL
  // 你可以在这里添加其他Axios配置，如timeout, headers等
  timeout: 100000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default {
  name: 'HelloComponent',
  data() {
    return {
      tableData: [
        {
          url: '/api/hello_api/hello',
          method: 'GET',
          params: {name: 'cat'},
        },
        {
          url: '/api/hello_api/post_json',
          method: 'POST',
          data: {
            "name": 'tom',
            "age": 1
          },
          headers: {},
        },
      ],
    }
  },
  methods: {
    async testSleep() {
      let url = '/api/hello_api/test_sleep';
      for (let i = 0; i < 3; i++) {
        let res = await axiosInstance.get(url) // await 阻塞
        console.log('testSleep', res.data, fmtDateY_M_D_H_M_S(new Date()))
      }
      for (let i = 0; i < 3; i++) {
        axiosInstance.get(url,).then(res => { // 异步不阻塞
          console.log('testSleep', res.data, fmtDateY_M_D_H_M_S(new Date()))
        })
      }
    },
    async postFormData() {
      let url = '/api/hello_api/post_formData';
      const file1 = this.$refs.file1.files[0];
      const file2 = this.$refs.file2.files[0];
      const data = new FormData();
      data.append('file1', file1);
      data.append('file2', file2);
      data.append('name', 'cat');
      let headers = {
        'Content-Type': 'multipart/form-data;'
      }
      let res = await this.post(url, {}, data, headers)
      this.$message.info(JSON.stringify(res))
    },
    async get(url, params = {}, headers = {}) {
      let res = await axios.get(url, {
        params: params,
        headers: headers
      });
      return res.data
    },
    async post(url, params = {}, data = {}, headers = {}) {
      let res = await axios.post(url, data, {
        params: params,
        headers: headers
      });
      return res.data
    },
    async submit(row) {
      let res = await new axios({
        method: row.method,
        url: row.url,
        data: row.data,
        params: row.params,
        headers: row.headers
      })
      this.$message.info(JSON.stringify(res.data))
      return res.data
    },
  }
}
</script>

